<template>
	<view class="shop">
		<view class="shop-tabs">
			<u-tabs :list="list"  :is-scroll="false" :current="current" @change="change" active-color="#D1AA56"></u-tabs>
		</view>
		<view class="content">
			<view class="item" v-for="(item,index) in goodsList" :key="index" v-if="is_token == true">
				<image :src="item.goods_pic_one" mode=""  @click="goGoodsDetail(item.goods_id)"></image>
				<view class="item-right">
					<view class="name" @click="goGoodsDetail(item.goods_id)">
						{{item.goods_name}}
					</view>
					<view class="desc" @click="goGoodsDetail(item.goods_id)">
						{{item.goods_sub_describition}}
					</view>
					<view class="tags" @click="goGoodsDetail(item.goods_id)">
						<u-tag :text="i" type="warning" size="mini" v-for="(i,iInedex) in item.label_names" :key="iInedex"></u-tag>
					</view>
					<view class="old-price" @click="goGoodsDetail(item.goods_id)">
						¥{{item.sub_prices}}
					</view>
					<view class="goods-btm">
						<text>{{item.goods_prices}}</text>
						<view class="goods-btm-right">
							<image src="../../../static/ic_buycar_round.png" mode="widthFix" @click="onAddCart(item.goods_id)"></image>
							<button class="bg-btn" @click="goSubmitOrder(item.goods_id)">马上抢</button>
						</view>
					</view>
				</view>
			</view>
			<view class="item" v-for="(item,index) in goodsList" :key="index" v-if="is_token == false" @click="goLogin">
				<image :src="item.goods_pic_one" mode=""></image>
				<view class="item-right">
					<view class="name">
						{{item.goods_name}}
					</view>
					<view class="desc">
						{{item.goods_sub_describition}}
					</view>
					<view class="tags">
						<u-tag :text="i" type="warning" size="mini" v-for="(i,iInedex) in item.label_names" :key="iInedex"></u-tag>
					</view>
					<view class="old-price">
						¥{{item.sub_prices}}
					</view>
					<view class="goods-btm">
						<text>{{item.goods_prices}}</text>
						<view class="goods-btm-right">
							<image src="../../../static/ic_buycar_round.png" mode="widthFix" ></image>
							<button class="bg-btn">马上抢</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				tabsId:0,
				goodsList:[],
				page:1,
				is_token:false
			};
		},
		onShow() {
			let is_login = uni.getStorageSync('go_login')
			if (is_login == 1) {
				this.is_token = false
			} else{
				this.is_token = true
			}
		},
		onReachBottom() {
			this.page ++
			this.getGoodsLsit()
		},
		created() {
			this.getTabsList()
			this.getGoodsLsit()
		},
		methods:{
			// 去登陆
			goLogin(){
				uni.showModal({
					content:'宝贝都为珍惜孤品，为了保障您的购买体验和资金安全，系统需要您的授权，所有的信息都会保密',
					confirmText:'去授权',
					confirmColor:'#D1AA56',
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('go_login',1)
							uni.switchTab({
								url:'../../mine/mine'
							})
						}
					}
				})
			},
			// 加入购物车
			onAddCart(id){
				uni.request({
				    url:this.$Url +'/index.php/app/Cart/addCart',
				    method:'POST',
				    data:{
				       live_program_id:'',
					   goods_id:id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 前往确认订单
			goSubmitOrder(id){
				uni.removeStorageSync('old_data')
				uni.navigateTo({
					url:'goodsDetail/submitOrder/submitOrder?id=' + id + '&type=1'
				})
			},
			// 请求商品列表
			getGoodsLsit(){
				uni.request({
				    url:this.$Url +'/index.php/App/Goods/goodsListNew',
				    method:'POST',
				    data:{
				       p:this.page,
					   category_id:this.tabsId
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
							this.goodsList = this.goodsList.concat(res.data.data.goods_list)
				       } else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
				       }
				    }
				})
			},
			// 请求tabs列表
			getTabsList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Goods/goodsCategory',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
							this.list = res.data.data
				       } else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
				       }
				    }
				})
			},
			// tabs切换
			change(index) {
				this.current = index;
				this.tabsId = this.list[index].id
				this.page = 1
				this.goodsList = []
				this.getGoodsLsit()
			},
			// 前往产品详情
			goGoodsDetail(id){
				uni.navigateTo({
					url:'goodsDetail/goodsDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.shop{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.shop-tabs{
		background-color: #fff;
		padding-top: 10upx;
		padding-bottom: 10upx;
		position: fixed;
		width: 100%;
		z-index: 100;
	}
	.content{
		padding-top: 110upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.item{
			width: 710upx;
			height: 333upx;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			align-items: center;
			margin-bottom: 20upx;
			image{
				width: 260upx;
				height: 260upx;
				margin-right: 24upx;
				margin-left: 24upx;
			}
			.item-right{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				width: 380upx;
				.name{
					font-size: 30upx;
					color: #000;
					font-weight: 600;
					margin-bottom: 15upx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				.desc{
					font-size: 23upx;
					color: #7f7f7f;
					margin-bottom: 15upx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				.tags{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-bottom: 30upx;
				}
				.old-price{
					font-size: 18upx;
					color: #999;
					text-decoration: line-through;
					margin-bottom: 5upx;
				}
				.goods-btm{
					display: flex;
					align-items: center;
					justify-content: space-between;
					 text{
						 font-size: 24upx;
						 font-weight: 600;
						 color: #c11800;
					 }
					 .goods-btm-right{
						 display: flex;
						 align-items: center;
						 image{
							 width: 53upx;
							 margin-right: 14upx;
						 }
						 button{
							 padding: 0upx 30upx;
							 
							 font-size: 22upx;
							 font-weight: 500;
							 display: flex;
							 align-items: center;
							 justify-content: center;
						 }
					 }
				}
			}
		}
	}

}
</style>
